<template>
    <div>

        <div class="card" style="line-height: 30px">
            <div v-if="user.role==='ADMIN'">欢迎您管理员，{{ user.username }} 祝您今天元气满满！</div>
            <div v-if="user.role==='TENANT'">欢迎您会员，{{ user.uname }} 祝您今天元气满满！</div>
        </div>

        <br/>

        <div class="card">
            <div style="margin-bottom: 10px;">
                <el-table :data="data.tableData">
                    <el-table-column label="序号" prop="id" width="70"></el-table-column>
                    <el-table-column label="登录账户" prop="name"></el-table-column>
                    <el-table-column label="登录IP" prop="ip"></el-table-column>
                    <el-table-column label="登录地址" prop="address"></el-table-column>
                    <el-table-column label="登录时间" prop="logintime"></el-table-column>
                </el-table>
            </div>
            <div class="card">
                <el-pagination background layout="prev, pager,next" @current-change="handelCurrentChange"
                               v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                               :total="data.total"/>
            </div>
        </div>

    </div>
</template>

<script setup>

    import {reactive, ref} from "vue";
    import {Search} from "@element-plus/icons-vue";
    import request from "@/utils/request.js";
    import {ElMessage} from "element-plus";

    const user = JSON.parse(localStorage.getItem('login-user') || '{}');

    //初始值
    const data = reactive({
        content: '',  //初始搜索条件是''
        tableData: [],
        pageNum: 1, //当前页码
        pageSize: 8, //每页个数
        total: 0
    });

    //请求数据
    const load = () => {
        var name = "";
        if (user.role === "ADMIN") {
            name = user.username;
        } else {
            name = user.uname;
        }
        //发送了一个Get请求，查询房源信息
        request.get("/loginlog/selectPage", {
            params: {
                pageNum: data.pageNum, //当前页码
                pageSize: data.pageSize, //每页大小
                name: name, //查询条件
            }
        }).then(res => {
            console.log("分页数据:" + JSON.stringify(res.data));
            data.tableData = res.data?.list || [];
            data.total = res.data?.total || 0;
        })
    };


    /**
     * 01-调用方法获取后台数据,视图打开自动调用该方法，加载房源信息
     */
    load();

</script>